<style>
   .in-the-box h2 {
   font-size: 28px;
   margin-bottom: 40px;
   text-align: center;
   }
   /* Wrapper for combined horizontal scroll */
   .all-images-scroll {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   padding-bottom: 10px;
   scrollbar-color: #999 #eee; /* Firefox */
   scrollbar-width: thin;
   }
   .all-images-scroll::-webkit-scrollbar-thumb {
   background-color: #999;
   }
   /* Top-row and bottom-row layouts */
   .top-row,
   .bottom-row {
   width: 100%;
   display: flex;
   gap: 20px;
   flex-wrap: nowrap;
   overflow-x: visible; 
   }
   .bottom-row {
   max-width:99%;
   justify-content: space-between;
   }
   .accessory {
   min-width: 120px;
   }
   /* Images */
   .top-item img,
   .accessory img {
   width: 100%;
   display: block;
   }
   .top-item img {
   max-height: 220px;
   }
   .accessory img {
   max-height: 100px;
   }
   .in-the-box {
   background-color: #fff;
   color: #333;
   }
   .in-the-box h2 {
   color: #222;
   font-family: HarmonyOS Sans;
   font-weight: 700;
   font-size: 48px;
   line-height: 120%;
   letter-spacing: 0px;
   text-align: center;
   },
   /* Scrollbar styling for WebKit */
   .all-images-scroll::-webkit-scrollbar {
   height: 8px;
   }
   /* Item sizing */
   .top-item,
   .accessory {
   position: relative;
   text-align: center;
   flex: 0 0 auto;
   background: #fafafa;
   padding:24px;
   }
   .accessory p {
   font-family: HarmonyOS Sans;
   font-weight: 700;
   font-size: 22px;
   line-height: 120%;
   letter-spacing: 0px;
   }
   .top-item.large {
   flex: 0 0 calc(80% - 10px);
   }
   .top-item:not(.large) {
   flex: 0 0 calc(20% - 10px);
   }
   .accessory {
   min-width: 140px;
   box-shadow: 0 1px 6px rgb(0 0 0 / 0.1);
   }
   /* Images */
   .top-item img,
   .accessory img {
   width: 100%;
   height: auto;
   object-fit: contain;
   display: block;
   user-select: none;
   }
   .top-item img {
   max-height: 220px;
   }
   .accessory img {
   max-height: 100px;
   margin-bottom: 8px;
   }
   /* Text overlays on images */
   .top-item h3 {
   position: absolute;
   bottom: 13rem;
   left:3px;
   margin: 0;
   padding: 6px 12px;
   font-size: 24px;
   font-weight: 600;
   color: #000000;
   text-align: center;
   user-select: none;
   pointer-events: none;
   }
   /* Show/hide images based on device */

img.desktop-img{
   display:block;
}
      img.mobile-img {
         display: none;
      }

   /* Desktop styles */
   @media (min-width: 768px) {
   .all-images-scroll {
   overflow-x: visible;
   flex-wrap: wrap;
   justify-content: center;
   }
   /* Hide scrollbar on desktop */
   .all-images-scroll::-webkit-scrollbar {
   display: none;
   }
   .all-images-scroll {
   scrollbar-width: none;
   }
   }
   /* Desktop styles */
   @media (min-width: 768px) {
   .all-images-scroll {
   overflow-x: visible;
   flex-wrap: wrap;
   justify-content: center;
   }
   /* Hide scrollbar on desktop */
   .all-images-scroll::-webkit-scrollbar {
   display: none;
   }
   .all-images-scroll {
   scrollbar-width: none;
   }
   }
   @media (max-width: 768px ){

      img.desktop-img {
    display: none;
}

img.mobile-img {
    display: block;
}
    .in-the-box h2{
      font-size:40px;
    }

   .all-images-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-color: #000 #eee;
    scrollbar-width: thin;
    white-space: nowrap;
    background-image: linear-gradient(to right, #eee 0%, #eee 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 2px;
} 
    
   .container.rok-bx {
   padding-right: 16px;
   padding-left: 16px;
   }
   .top-row {
   gap: 14px;
   }
   .top-row .top-item h3 {
   /* left: 24px; */
   top: 24px;
   font-family: HarmonyOS Sans;
   font-weight: 700;
   font-size: 20px;
   line-height: 120%;
   letter-spacing: 0px;
   }
   .top-item {
   flex: none;
   }
   .top-item {
   width: 320px!important;
   display: flex!important;
   height: 320px;
   align-items: center;
   }
   .top-row
   {
   width:auto;
   }
   .bottom-row
   {
   width:auto;
   max-width:initial;
   gap:20px;
   }
   .accessory {
   min-width: 140px;
   box-shadow: 0 1px 6px rgb(0 0 0 / 0.1);
   width: 320px;
   }
   .top-row .top-item {
   flex: none;
   }
   .top-item {
   width: 320px;
   }
   }
   @media (min-width: 768px) and (max-width: 1024px) {

    .bottom-row {
    width: auto;
    max-width: 100%;
    gap: 20px;
}
  .all-images-scroll {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #000 #eee;
  }

  .all-images-scroll::-webkit-scrollbar {
    height: 6px;
  }

  .all-images-scroll::-webkit-scrollbar-thumb {
    background-color: #000;
  }

  .all-images-scroll::-webkit-scrollbar-track {
    background-color: #eee;
  }
}

</style>
<section class="in-the-box {{section.settings.target_text}}">
   <div class="container rok-bx">
      <h2>{{ section.settings.title | escape }}</h2>
      <div class="all-images-scroll">
         <!-- Top Row -->
         <div class="top-row">
            {% for block in section.blocks %}
            {% if block.type == 'main_left' %}
            <div class="top-item large">
              {% if block.settings.image %}
  <img class="desktop-img" src="{{ block.settings.image | image_url: width: 500 }}" alt="{{ block.settings.title }}" />
{% endif %}
{% if block.settings.mobile_image %}
  <img class="mobile-img" src="{{ block.settings.mobile_image | image_url: width: 500 }}" alt="{{ block.settings.title }}" />
{% endif %}
<h3>{{ block.settings.title }}</h3>

            </div>
            {% endif %}
            {% if block.type == 'main_right' %}
            <div class="top-item">
                     {% if block.settings.image %}
         <img class="desktop-img" src="{{ block.settings.image | image_url: width: 300 }}" alt="{{ block.settings.title }}" />
         {% endif %}
         {% if block.settings.mobile_image %}
         <img class="mobile-img" src="{{ block.settings.mobile_image | image_url: width: 300 }}" alt="{{ block.settings.title }}" />
         {% endif %}
               <h3>{{ block.settings.title }}</h3>
            </div>
            {% endif %}
            {% endfor %}
         </div>
         <!-- Bottom Row (Accessories) -->
         <div class="bottom-row">
            {% for block in section.blocks %}
            {% if block.type == 'accessory' %}
            <div class="accessory">
               <p>{{ block.settings.title }}</p>
                    {% if block.settings.image %}
         <img class="desktop-img" src="{{ block.settings.image | image_url: width: 200 }}" alt="{{ block.settings.title }}" />
         {% endif %}
         {% if block.settings.mobile_image %}
         <img class="mobile-img" src="{{ block.settings.mobile_image | image_url: width: 200 }}" alt="{{ block.settings.title }}" />
         {% endif %}
            </div>
            {% endif %}
            {% endfor %}
         </div>
      </div>
   </div>
</section>
{% schema %}
{
  "name": "In the Box",
  "class": "kik-rokid-box",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "In the Box"
    },
    {
      "type": "text",
      "id": "target_text",
      "label": "custom class",
    }
  ],
  "blocks": [
    {
      "type": "main_left",
      "name": "Main Left",
      "settings": [
        { "type": "text", "id": "title", "label": "Title" },
        { "type": "image_picker", "id": "image", "label": "Desktop Image" },
        { "type": "image_picker", "id": "mobile_image", "label": "Mobile Image" }
      ]
    },
    {
      "type": "main_right",
      "name": "Main Right",
      "settings": [
        { "type": "text", "id": "title", "label": "Title" },
        { "type": "image_picker", "id": "image", "label": "Desktop Image" },
        { "type": "image_picker", "id": "mobile_image", "label": "Mobile Image" }
      ]
    },
    {
      "type": "accessory",
      "name": "Accessory Item",
      "settings": [
        { "type": "text", "id": "title", "label": "Title" },
        { "type": "image_picker", "id": "image", "label": "Desktop Image" },
        { "type": "image_picker", "id": "mobile_image", "label": "Mobile Image" }
      ]
    }
  ],
  "presets": [
  {
    "name": "In the Box"
  }
  ]
}
{% endschema %}